@@include('../partials/_template-top.html', {
'bodyClass': 'home-one-bg'
})

@@include('../partials/_header.html')
<div id="scrollSmoother-container">
    @@include('../partials/_breadcrumb.html', {
    'breadcrumbText': 'Shop Details',
    'breadcrumbTitle': 'SHOP DETAILS'
    })

    <section class="shop-details-area py-120 overflow-hidden position-relative z-1">
        <div class="container">
            <div class="row g-4 align-items-center">
                <div class="col-lg-6">
                    <!-- Swiper -->
                    <div class="swiper swiper-container shop-slider-active2 mb-4">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="shop-details-thumb">
                                    <img src="assets/images/thumbs/shop-details-thumb1.webp" alt="product" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="shop-details-thumb">
                                    <img src="assets/images/thumbs/shop-details-thumb2.webp" alt="product" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="shop-details-thumb">
                                    <img src="assets/images/thumbs/shop-details-thumb3.webp" alt="product" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper shop-slider-active swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="shop-details-thumb">
                                    <img src="assets/images/thumbs/shop-details-thumb1.webp" alt="product" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="shop-details-thumb">
                                    <img src="assets/images/thumbs/shop-details-thumb2.webp" alt="product" />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="shop-details-thumb">
                                    <img src="assets/images/thumbs/shop-details-thumb3.webp" alt="product" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="shop-details-content">
                        <span class="subtitle">Flower</span>
                        <h2 class="title">Event T-Shirt</h2>
                        <div class="shop-details-rating-wrapper">
                            <div class="shop-details-rating">
                                <i class="ph-fill ph-star"></i>
                                <i class="ph-fill ph-star"></i>
                                <i class="ph-fill ph-star"></i>
                                <i class="ph-fill ph-star"></i>
                                <i class="ph ph-star"></i>
                            </div>
                            <span class="shop-details-rating-count">(4.50)4 Reviews</span>
                        </div>
                        <div class="shop-details-price-wrapper">
                            <span class="shop-details-new-price">$25.00</span>
                            <span class="shop-details-old-price">$35.00</span>
                        </div>

                        <p class="shop-details-desc">
                            Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                            industry’s standard dummy text ever
                            since the when unknown rinter took a galley scrambled.
                        </p>

                        <div class="shop-details-action tw-mb-6">
                            <div class="shop-details-quantity qty-control">
                                <button class="minus qty-minus">
                                    <i class="ph ph-minus"></i>
                                </button>
                                <input type="number" value="1" min="1" class="qty" />
                                <button class="plus qty-plus">
                                    <i class="ph ph-plus"></i>
                                </button>
                            </div>
                            <div class="shop-details-btn w-100">
                                <a href="javascript:void(0);" class="add-to-cart-btn">Add To Cart</a>
                            </div>
                        </div>

                        <div class="shop-details-action mb-60">
                            <div class="shop-details-btn">
                                <a href="wishlist.html" class="add-to-wishlist-btn">
                                    <span class="icon">
                                        <i class="ph ph-heart"></i>
                                    </span>
                                    Add to Wishlist
                                </a>
                            </div>
                            <div class="shop-details-btn">
                                <a href="compare.html" class="add-to-compare-btn">
                                    <span class="icon">
                                        <i class="ph ph-sliders-horizontal"></i>
                                    </span>
                                    Add to Compare
                                </a>
                            </div>
                        </div>

                        <div class="shop-details-meta">
                            <div class="shop-details-meta-item category">
                                <span class="meta-title">Categories:</span>
                                <ul class="meta-list">
                                    <li><a href="shop.html">Clothing</a></li>
                                    <li><a href="shop.html">T-Shirt</a></li>
                                </ul>
                            </div>

                            <div class="shop-details-meta-item tags">
                                <span class="meta-title">Tags:</span>
                                <ul class="meta-list">
                                    <li><a href="shop.html">Fashion</a></li>
                                    <li><a href="shop.html">T-Shirt</a></li>
                                </ul>
                            </div>

                            <div class="shop-details-meta-item share">
                                <span class="meta-title">Share:</span>
                                <ul class="meta-list">
                                    <li><a href="javascript:void(0);">
                                            <span class="icon">
                                                <i class="ph ph-facebook-logo"></i>
                                            </span>
                                        </a></li>
                                    <li><a href="javascript:void(0);">
                                            <span class="icon">
                                                <i class="ph ph-twitter-logo"></i>
                                            </span>
                                        </a></li>
                                    <li><a href="javascript:void(0);">
                                            <span class="icon">
                                                <i class="ph ph-instagram-logo"></i>
                                            </span>
                                        </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- tabs -->
            <div class="row mt-lg-0 mt-5">
                <div class="col-12">
                    <ul class="nav nav-tabs shop-details-tab-nav" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="description-tab" data-bs-toggle="tab"
                                data-bs-target="#description" type="button" role="tab" aria-controls="description"
                                aria-selected="true">Description</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="information-tab" data-bs-toggle="tab"
                                data-bs-target="#information" type="button" role="tab" aria-controls="information"
                                aria-selected="false">Additional Information</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews"
                                type="button" role="tab" aria-controls="reviews" aria-selected="false">Reviews</button>
                        </li>
                    </ul>

                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="description" role="tabpanel"
                            aria-labelledby="description-tab">
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                        </div>
                        <div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                        </div>
                        <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                            <p class="shop-details-tab-desc">
                                Rimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                industry’s standard dummy text ever
                                since the when unknown rinter took a galley scrambled.
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <section class="related-product-area position-relative overflow-hidden z-1">
        <div class="container">
            <!-- related products -->
            <div class="row">
                <div class="col-12">
                    <h3 class="title text-center">Related Products</h3>
                </div>
                <div class="row g-4">

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12 product-card-col">
                        <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="product-card-thumb">
                                <a href="shop-details.html">
                                    <img src="assets/images/thumbs/shop-product-1.webp" alt="img">
                                </a>
                                <div class="product-card-action-button-wrapper">
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                            <i class="ph ph-shopping-cart"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-compare-btn"
                                            title="Add to Compare">
                                            <i class="ph ph-sliders-horizontal"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-wishlist-btn"
                                            title="Add to Wishlist">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card-content">
                                <div class="product-card-rating">
                                    <span class="product-card-rating-star">
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                    </span>
                                </div>

                                <h5 class="product-card-title">
                                    <a href="shop-details.html" class="">Formal Half-pant</a>
                                </h5>
                                <div class="product-card-meta">
                                    <span class="product-card-price">
                                        <span class="product-card-price-new">$ 99.00</span>
                                        <span class="product-card-price-old">$ 129.00</span>
                                    </span>
                                </div>

                                <div class="product-card-button text-center">
                                    <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                        href="javascript:void(0);">
                                        <span class="theme-btn-text">Add to Cart</span>
                                        <span class="text-only-button-icon bg-main-600 text--white">
                                            <i class="ph ph-arrow-right"></i>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12 product-card-col">
                        <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="product-card-thumb">
                                <a href="shop-details.html">
                                    <img src="assets/images/thumbs/shop-product-2.webp" alt="img">
                                </a>
                                <div class="product-card-action-button-wrapper">
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                            <i class="ph ph-shopping-cart"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-compare-btn"
                                            title="Add to Compare">
                                            <i class="ph ph-sliders-horizontal"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-wishlist-btn"
                                            title="Add to Wishlist">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card-content">
                                <div class="product-card-rating">
                                    <span class="product-card-rating-star">
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                    </span>
                                </div>

                                <h5 class="product-card-title">
                                    <a href="shop-details.html" class="">Minimal Cap</a>
                                </h5>
                                <div class="product-card-meta">
                                    <span class="product-card-price">
                                        <span class="product-card-price-new">$ 99.00</span>
                                        <span class="product-card-price-old">$ 129.00</span>
                                    </span>
                                </div>

                                <div class="product-card-button text-center">
                                    <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                        href="javascript:void(0);">
                                        <span class="theme-btn-text">Add to Cart</span>
                                        <span class="text-only-button-icon bg-main-600 text--white">
                                            <i class="ph ph-arrow-right"></i>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12 product-card-col">
                        <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="product-card-thumb">
                                <a href="shop-details.html">
                                    <img src="assets/images/thumbs/shop-product-3.webp" alt="img">
                                </a>
                                <div class="product-card-action-button-wrapper">
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                            <i class="ph ph-shopping-cart"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-compare-btn"
                                            title="Add to Compare">
                                            <i class="ph ph-sliders-horizontal"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-wishlist-btn"
                                            title="Add to Wishlist">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card-content">
                                <div class="product-card-rating">
                                    <span class="product-card-rating-star">
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                    </span>
                                </div>

                                <h5 class="product-card-title">
                                    <a href="shop-details.html" class="">Event T-Shirt</a>
                                </h5>
                                <div class="product-card-meta">
                                    <span class="product-card-price">
                                        <span class="product-card-price-new">$ 99.00</span>
                                        <span class="product-card-price-old">$ 129.00</span>
                                    </span>
                                </div>

                                <div class="product-card-button text-center">
                                    <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                        href="javascript:void(0);">
                                        <span class="theme-btn-text">Add to Cart</span>
                                        <span class="text-only-button-icon bg-main-600 text--white">
                                            <i class="ph ph-arrow-right"></i>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-lg-4 col-sm-6 col-12 product-card-col">
                        <div class="product-card shop-one-card" data-aos="fade-up" data-aos-duration="1000"
                            data-aos-delay="200">
                            <div class="product-card-thumb">
                                <a href="shop-details.html">
                                    <img src="assets/images/thumbs/shop-product-4.webp" alt="img">
                                </a>
                                <div class="product-card-action-button-wrapper">
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-cart-btn" title="Add to Cart">
                                            <i class="ph ph-shopping-cart"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-compare-btn"
                                            title="Add to Compare">
                                            <i class="ph ph-sliders-horizontal"></i>
                                        </button>
                                    </div>
                                    <div class="product-card-action-item">
                                        <button class="product-card-action-btn add-to-wishlist-btn"
                                            title="Add to Wishlist">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card-content">
                                <div class="product-card-rating">
                                    <span class="product-card-rating-star">
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                        <i class="ph-fill ph-star"></i>
                                    </span>
                                </div>

                                <h5 class="product-card-title">
                                    <a href="shop-details.html" class="">Tea Cup</a>
                                </h5>
                                <div class="product-card-meta">
                                    <span class="product-card-price">
                                        <span class="product-card-price-new">$ 99.00</span>
                                        <span class="product-card-price-old">$ 129.00</span>
                                    </span>
                                </div>

                                <div class="product-card-button text-center">
                                    <a class="text-only-button button-two btn-sm text--white hover-text-main-600"
                                        href="javascript:void(0);">
                                        <span class="theme-btn-text">Add to Cart</span>
                                        <span class="text-only-button-icon bg-main-600 text--white">
                                            <i class="ph ph-arrow-right"></i>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    @@include('../partials/_footer-two.html')
</div>


@@include('../partials/_template-bottom.html')
</body>

</html>